/**
 * @desc: 打印记录列表
 * @author: fj
 */
import React, { useState, useEffect } from 'react';
import ViewRecordsModal from './common/ViewRecordsModal';
import PreviewReprintModal from './common/PreviewReprintModal';
import TableRender from '@/components/TableRender';

const printTypeColumn = {
  title: '打印类型',
  code: 'printTypeName',
  key: 'printTypeName',
  width: 120,
}

const PrintRecordList = ({ type, data, pages, setPages, headerHeight }) => {
  //查看打印记录
  const [viewVisible, setViewVisible] = useState(false);
  //预览重新打印
  const [printVisible, setPrintVisible] = useState(false);
  //打印列表
  const [printListData, setPrintListData] = useState([]);
  //单行数据
  const [record, setRecord] = useState({});

  const columns = [
    {
      name: '序号',
      code: 'index',
      width: 60,
      render: (t, r, i) => i + 1,
    },
    {
      name: '打印批次',
      code: 'batchNo',
      width: 120,
    },
    {
      name: '批次打印时间',
      code: 'printTime',
      width: 150,
    },
    {
      name: '订单数量',
      code: 'orderNum',
      width: 80,
      // render: (text, record) => {
      //   return (
      //     <span style={{cursor: 'pointer'}} onClick={() => getView(record)} className="common-color1">
      //       {text}
      //     </span>
      //   );
      // },
    },
    {
      name: '操作人',
      code: 'operationName',
      width: 100,
      render: (text, record) => {
        return text ? (
          <span>
            {`${text}(${record.operationAccount})`}
          </span>
        ) : (
          <span>{record.operationAccount}</span>
        );
      },
    },
    {
      name: '打印机',
      code: 'printerName',
      width: 120,
      render: (text) => {
        return <>{text != 'null' ? text : ''}</>;
      },
    },
    {
      name: '所属仓库',
      code: 'warehouseName',
      width: 100,
    },
    {
      name: '操作',
      code: 'endTime',
      width: 100,
      render: (text, record) => {
        return (
          <>
            <span className="opera-span-common">
              <span onClick={() => getPrint(record)}>预览重新打印</span>
            </span>
          </>
        );
      },
    },
  ];

  if (['3', '4', '5'].includes(type)) {
    columns.splice(6, 1);
  }

  if (type == '3') {
    columns.splice(3, 0, printTypeColumn)
  }

  useEffect(() => {
    if (data.length > 0) {
      setPrintListData(data);
    } else {
      setPrintListData([]);
    }
  }, [data]);

  // 查看打印记录
  const getView = (record) => {
    setViewVisible(true);
    setRecord(record);
  };

  // 预览重新打印
  const getPrint = (record) => {
    setPrintVisible(true);
    setRecord(record);
  };

  //处理打印后的数据(局部刷新)
  const handleData = (printerSuccessData) => {
    const arr = [...data];
    if (Object.keys(printerSuccessData).length > 0) {
      arr.unshift(printerSuccessData);
      setPrintListData(arr);
      setPages({
        ...pages,
        total: pages.total + 1
      })
    }
  };

  //表格组件
  const TableRenderProps = {
    data: printListData,
    columns,
    rowKey: 'id',
    style: {
      height: `calc(100vh - ${headerHeight + 230}px)`
    },
    pageConfig: {
      pages,
      handlePageSize(page, size) {
        setPages({
          ...pages,
          current: page,
          pageSize: size
        });
      }
    }
  }

  //查看打印记录的props
  const viewRecordsProps = {
    visible: viewVisible,
    record,
    handleCancel() {
      setViewVisible(false);
      setRecord({});
    },
  };

  //预览重新打印的props
  const printRecordsProps = {
    type,
    record,
    handleCancel(printerSuccessData) {
      setPrintVisible(false);
      setRecord({});
      handleData(printerSuccessData);
    },
    handleOK() {
      setPrintVisible(false);
    },
  };

  return (
    <div className='global-page-wrap'>
      <TableRender {...TableRenderProps} />
      {viewVisible && <ViewRecordsModal {...viewRecordsProps} />}
      {printVisible && <PreviewReprintModal {...printRecordsProps} />}
    </div>
  );
};

export default PrintRecordList;